<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>College list</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h2>College list</h2>
    <button v-on:click="preAdd">Add college</button>
    <table border="1" width="100%">
        <tr>
            <th>#</th>
            <th>College.Name</th>
            <th>Operation</th>
        </tr>
        <tr v-for="(item, index) in colleges">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>
                <button v-on:click="preEdit(index)">Edit</button>
                <button v-on:click="delCollege(item.id)">Delete</button>
            </td>
        </tr>
    </table>
    <!--  学院信息对话框 -->
    <dialog ref="dialog">
        <h3 align="center">{{editing?'Edit':'Add'}} college</h3>
        <table width="100%">
            <tr>
                <td>Name</td>
                <td><input type="text" v-model="editedCollege.name" placeholder="Input name of college"></td>
            </tr>
        </table>
        <div class="action">
            <button v-on:click="this.editing=false;this.$refs.dialog.close()">cancel</button>
            <button v-if="editing" v-on:click="editedCollege">Update</button>
            <button v-else v-on:click="addCollege">Save</button>
        </div>
    </dialog>
</div>

<script>
    const app = {
        data() {
            return {
                // 编辑状态
                editing: false,
                // editedCourse数据对象用来和各输入框双向绑定
                editedCollege:{
                    name: null
                },
                // 学院列表
                colleges:[]
            }
        },
        // Vue应用对象的生命周期函数之一
        mounted() {
            this.loadColleges();
        },
        methods: {
            // 获取学院列表
            loadColleges(){
                axios.get("/college/college").then(res=>{
                    this.colleges =res.data;
                }).catch(err=>{
                    alert(err);
                })
            },
            // 弹出“增加学院对话框”前处理
            preAdd() {
                // 新增学院前，学院信息置空
                this.editedCollege = {name: null};
                this.editing = false;
                // 显示对话框
                this.$refs.dialog.showModal();
            },

            //“添加学院”函数
            addCollege() {
                axios.post('/college/college', this.editedCollege).then(res => {
                    // 成功返回，直接重新读取学院列表
                    this.loadColleges(); //新学院添加成功后重新查询学院列表并刷新界面
                    this.$refs.dialog.close();  // 关闭单对话框
                }).catch(err => {
                    console.error(err);
                    alert("添加学院发生网络异常，请重试");
                    this.$refs.dialog.close(); // 隐藏表单对话框
                });
            },

            // 删除学院函数
            delCollege(id) {
                axios.delete('/college/college/' + id).then(res => {
                    this.loadColleges();
                    alert(res.data);
                }).catch(err => {
                    alert('网络请求异常，请重试!');
                });
            },

            // @Param index 修改学院在整个课程列表中的位置
            preEdit(index) {
                // 复制指定位置的课程到待编辑学院（因为this.editedCourse和对话框输入项绑定的）
                this.editedCollege = {
                    name: this.colleges[index].name
                }
                this.editing = true;  // 修改标志
                this.$refs.dialog.showModal();   // 弹出对话框
            },
            // 修改学院
            editedCollege() {
                axios.put('/college/college/' + this.editedCollege.id
                    + '&name=' + this.editedCollege.name
                ).then(res => {
                    if (res.data) {
                        this.loadColleges();	//当修改成功，刷新页面
                        this.editing = false;
                        this.$refs.dialog.close();
                    } else {
                        alert('修改学院《' + this.editedCollege.name + '》失败');
                        this.editing = false;
                        this.$refs.dialog.close();
                    }
                }).catch(err => {
                    console.error(err);
                    this.editing = false;
                    this.$refs.dialog.close();
                });
            }
        }
    }
    // 建立Vue App对象，并装载到html元素上
    Vue.createApp(app).mount('#app');
</script>
</body>
</html>